<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">商铺入驻</block>
		</custom-nav-sq-xcx>
		<sq-screen-area :formFlag="true" :needBtnFlag="true">
			<block slot="formContent">
				<view class="sqFormWrap">
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>商铺名称</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="shName" placeholder="请输入商铺名称(20字内)" maxlength="20" placeholder-style="color:#8789B1"/>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>负责人姓名</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="fzrName" placeholder="请输入负责人姓名" maxlength="6" placeholder-style="color:#8789B1"/>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>联系电话</view>
						<view class="formCon">
							<input class="formInp" type="tel" v-model="lxTel" placeholder="请输入联系电话" maxlength="11" placeholder-style="color:#8789B1"/>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>所属类型</view>
						<picker class="formCon sqPickerView"  @change="bindShType" :value="shTypeIndex" :range="shTypeArr" range-key="name">
							<view class="street" :class="[isSelTypeFlag ? 'hasSel' : '']">{{shTypeTxt}}</view>
							<view class="triView">选择</view>
						</picker>
					</view>
					<!-- #ifdef APP-PLUS -->
						<view class="formItem">
							<view class="formTit"><text class="mustTag">*</text>商铺位置</view>
							<view class="formCon sqPickerView">
								<view class="street" :class="[isSelPosFlag ? 'hasSel' : '']">{{ locTxt }}</view>
								<view class="triView">选择</view>
							</view>
						</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
						<view class="formItem">
							<view class="formTit"><text class="mustTag">*</text>商铺位置</view>
							<view class="formCon">
								<input class="formInp" type="tel" v-model="locTxtXcx" placeholder="请输入商铺位置" maxlength="30" placeholder-style="color:#8789B1"/>
							</view>
						</view>
					<!-- #endif -->
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>商铺介绍</view>
						<view class="formCon spec">
							<textarea v-model="shIntro" class="formTxtarea" placeholder="请输商铺介绍(200字内)" maxlength="200"
								placeholder-style="color:#8789B1"></textarea>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>商铺封面</view>
						<view class="upSqView">
							<upload-image :mainImg="mainImg" :pathName="pathNameCover" :mainImgEdit="mainSucc_cover" :currType="currType" clickOpt="upCover" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<view class="iconfont icon-jia"></view>
							<view class="tipTxt">请上传商铺封面</view>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>营业执照</view>
						<view class="upSqView">
							<upload-image :mainImg="mainImg" :pathName="pathNameYyzz" :mainImgEdit="mainSucc_yyzz" :currType="currType" clickOpt="upYyzz" :radius="radius" @upImgIng="upImgIng" @uploadSingleImg="uploadSingleImg"></upload-image>
							<view class="iconfont icon-jia"></view>
							<view class="tipTxt">请上传营业执照</view>
						</view>
					</view>
				</view>
			</block>
			<block slot="formBtn">
				<button class="comBtn sq hasBorRad" :disabled="btnDisabFlag" @tap="goSubmit">{{btnTit}}</button>
			</block>
		</sq-screen-area>
	</view>
</template>

<script>
	import SqScreenArea from "@/components/sq-screen-area";
	import uploadImg from '@/components/upload-image/upload-image'
	export default {
		components:{
			SqScreenArea,
			uploadImg
		},
		data(){
			return{
				shName:'',
				fzrName:'',
				lxTel:'',
				shTypeArr:[{name:'卫生中心'},{name:'社区药店'},{name:'沿街门店'},{name:'其他'}],
				shTypeIndex:-1,
				isSelTypeFlag:false,
				shTypeTxt:'请选择商铺所属类型',
				isSelPosFlag:false,
				locTxt:'请选择商铺所在位置',
				locTxtXcx:'',
				shIntro:'',
				mainImg:'',
				mainSucc_cover:'',
				mainSucc_yyzz:'',
				btnDisabFlag:false,
				btnTit:'提交',
				radius:16,
				currType:'',
				pathNameCover:'sqSys/sqDprzFm',
				pathNameYyzz:'sqSys/sqDprzYyzz'
			}
		},
		methods:{
			bindShType(e){
				this.shTypeIndex = e.detail.value;
				this.isSelTypeFlag = true;
				this.shTypeTxt = this.shTypeArr[this.shTypeIndex].name;
			},
			upImgIng(){
				this.btnTit = '上传中...';
				this.btnDisabFlag = true;
			},
			uploadSingleImg(e){
				this.btnTit = '提交审核';
				this.btnDisabFlag = false;
				if(e.clickOpt == 'upYyzz'){
					this.mainSucc_yyzz = e.succSrc;
				}else if(e.clickOpt == 'upCover'){
					this.mainSucc_cover = e.succSrc;
				}
			},
			goSubmit(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/addYybs.scss';
</style>